<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/app/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/app/css/common.css"/>

    <title>SSL VPN</title>
    <link href="/app/css/mui.picker.css" rel="stylesheet" />
    <link href="/app/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="/app/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3;>
<div class="main_div">
<div class="main_body">

    <p class="topTip_p">客户经理折扣为6折。</p>
    <div class="listing">
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/app/image/SSLVPN.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">SSL VPN</h4>
                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">授权数</span>
                            <span class="left vpn_right" id="vpnResult">5</span>
                            <i class="right">
                                <img src="/app/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1">
                                <i>
                                    <img src="/app/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou" value="1">
                            <div class="stat_plus plus1">
                                <i>
                                    <img src="/app/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li>SSL VPN授权数:<span id = "vpnCount" value="1">5</span></li>
                    <li><span id="vpnData" value="1">1</span>个月</li>
                </ul>
                <p class="price_p right " id="cpu_price">125</p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">
<#--//九个计算值
        //CPU-->
<input type="hidden" id="total_cpu_t" name="total_cpu_t" value="438">
<input type="hidden" id="valueOfYear" name="valueOfYear" value="1425">
<input type="hidden" id="samplePrice" name="samplePrice" value="125">


<#--//存储-->
<input type="hidden" id="total_stat_t" name="total_stat_t" value="0">
<input type="hidden" id="total_stat_a" name="total_stat_a" value="0">
<input type="hidden" id="total_stat_d" name="total_stat_d" value="0">

<#--//带宽-->
<input hidden id="price_two" name="price_two" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">
<input type="hidden" name="openId" id="openId" value="${openId}">
</div>
<script src="/app/js/mui.min.js"></script>
<script src="/app/js/mui.poppicker.js"></script>
<script src="/app/js/mui.picker.min.js"></script>
<script src="/app/js/yun_title.js"></script>
<script>
    $("#ali_price").text("￥438");
    $("#tx_price").text("无此规格");
    function  getAllPrice() {
        var count=parseFloat($('#statnum').val());
        var type=$('#vpnCount').text();
        if(type==5||type==10||type==50){
            var total_ali_price=parseFloat($('#total_cpu_t').val());
            $("#ali_price").text("￥"+(total_ali_price*count).toFixed(2));
        }
        else {
            $("#ali_price").text("无此规格");
        }


        var price=parseFloat($("#samplePrice").val());
        $("#cpu_price").text("￥"+(price*count).toFixed(2));
        $("#allprice").text("￥"+(price*count).toFixed(2));

    };
    (function($, doc) {
        $.init();
        $.ready(function() {
            getAllPrice();
            //实例配置
            var vpnPicker = new $.PopPicker();
            vpnPicker.setData(
                [
                    {valueOfMon:125.00,text:'5',valueOfYear:'1425',aliPrice:'438'},
                    {valueOfMon:250.00,text:'10',valueOfYear:'2700',aliPrice:'538'},
                    {valueOfMon:1250.00,text:'50',valueOfYear:'9750',aliPrice:'1968'},
                    {valueOfMon:5000.00,text:'200',valueOfYear:'30000',aliPrice:'0'},
                    {valueOfMon:12500.00,text:'500',valueOfYear:'60000',aliPrice:'0'}
                ]
            );
            var showVpnPickerButton = doc.getElementById('showVpnPicker');
            var vpnResult = doc.getElementById('vpnResult');
            var vpnCount= doc.getElementById("vpnCount");
            var cpu_price= doc.getElementById("cpu_price");
            var samplePrice = doc.getElementById('samplePrice');
            var valueOfYear=doc.getElementById('valueOfYear');
            var total_cpu_t=doc.getElementById('total_cpu_t');
            //初始化计算价格
            //getEntityPrice(cpuCount_f.innerText,MemoryCount_f.innerText);
            //CPU点击事件
            showVpnPickerButton.addEventListener('tap', function(event) {
                vpnPicker.show(function(items) {
                    vpnResult.innerHTML=items[0].text;
                    vpnCount.innerHTML=items[0].text;
                    cpu_price.innerText ="￥"+items[0].valueOfMon;
                     valueOfYear.value = items[0].valueOfYear;
                    total_cpu_t.value=items[0].aliPrice;
                    samplePrice.value=items[0].valueOfMon;
                    getAllPrice();
                });



            }, false);
        });
    })(mui, document);
    $('#list').on("blur",'.stat_num',function (event) {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;

        }
        if(num<=0||num==""){
            $(this).val(1);
            //$('.stat_num')
            $("#vpnData").text(1);
            count(num);
        }
        else if(num>=2000){
            $(this).val(2000);
            $("#vpnData").text(num);
            count(num);
        }
        else {
            $(this).val(num);
            $("#vpnData").text(num);
            count(num);
        }
    });
    $('#list').on('click','.stat_plus',function (event) {
        console.dir(this);
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        if(num>=2000){
            numInput.val(2000);
            $("#vpnData").text(num);
            count(num);
        }
        else {
            num=num+1;
            numInput.val(num);
            $("#vpnData").text(num);
            count(num);
        }
    });
    $('#list').on('click','.stat_minus',function (event) {
        console.dir(this);
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);
            $("#vpnData").text(1);
            count(1);
        }
        else {
            num=num-1;
            numInput.val(num);
            $("#vpnData").text(num);
            count(num);
        }
    });
    function count(num) {
        var samplePrice = document.getElementById('samplePrice');
        var valueOfYear = document.getElementById('valueOfYear');
        var priceOfMon=parseFloat(samplePrice.value);
        var priceOfYear = parseFloat(valueOfYear.value);
        if(num<12){
            $("#cpu_price").text("￥"+(num*priceOfMon).toFixed(2));
            $("#allprice").text("￥"+(num*priceOfMon).toFixed(2));
        }
        if(num>12){
            var mon=0;
            var year=0;

            mon=parseFloat((num%12)*priceOfMon);
            year=parseFloat(parseInt((num/12))*priceOfYear);
            $("#cpu_price").text("￥"+(mon+year).toFixed(2));
            $("#allprice").text("￥"+(mon+year).toFixed(2));
        }
        if(num%12==0){
            var yearNum=parseFloat(num/12);
            $("#cpu_price").text("￥"+(yearNum*priceOfYear).toFixed(2));
            $("#allprice").text("￥"+(yearNum*priceOfYear).toFixed(2));
        }
        var type=$('#vpnCount').text();
        if(type==5||type==10||type==50){
            var total_ali_price=parseFloat($('#total_cpu_t').val());
            $("#ali_price").text("￥"+(total_ali_price*num).toFixed(2));
        }
        else {
            $("#ali_price").text("无此规格");
        }
    }

    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var shiLiPz="SSL_VPN";
        var shouQuanNum=$('#vpnCount').text();
        var shiJian=$('#vpnData').text()+"个月";


        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:shiLiPz,
            meMory:'',
            stat:shouQuanNum,
            brandNum:shiJian,

            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:7,//SSL VPN7
            productName:'SSL VPN',
            oneKey:'名称',
            twoKey:'授权数',
            threeKey:'时间',
            disCount:'1',
            oneImage:'list_icon3',
            twoImage:'list_icon4',
            threeImage:'list_icon8'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });



</script>


</body>

</html>
